<template>
<!-- 系统管理产品配置 -->
    <div class="pre">
        <h4>产品配置管理</h4>
        <hr>
        <div class='main'>
            <ul>
                <li>
                    <div class="top">
                        <span class="left">支持的设备型号</span>
                        <el-button type="text" @click="dialogVisible = true" class="right"><span>配置支持的设备型号</span></el-button>
                        <el-dialog title="配置支持的设备型号" :visible.sync="dialogVisible" width="45%" :before-close="handleClose">
                            <m-iphone></m-iphone>
                            <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
                        </el-dialog>
                    </div>
                    <div class="footer">
                        <ul>
                            <li>iPhone 7Plus</li>
                        </ul>
                    </div>
                </li>
                <li>
                    <div class="top">
                        <span class="left">支持的借款周期</span>
                        <el-button type="text" @click="dialogVisible1 = true"  class="right">  <span>配置支持的借款周期</span></el-button>
                        <el-dialog title="配置支持的借款周期" :visible.sync="dialogVisible1" width="45%" :before-close="handleClose">
                            <m-loanroom></m-loanroom>
                            <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible1 = false">确 定</el-button>
      </span>
                        </el-dialog>
                    </div>
                    <div class="footer">
                        <ul>
                            <li>7天</li>
                        </ul>
                    </div>
                </li>
                <li>
                    <div class="top">
                        
                        <span class="left">配置利息及额度方案</span>

                      <el-button type="text" @click="dialogVisible2 = true"  class="right"> <span>新增配置</span> </el-button>   
                            <el-dialog title="新增配置" :visible.sync="dialogVisible2" width="45%" :before-close="handleClose">
                            <m-newloan></m-newloan>
                            <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible2 = false">确 定</el-button>
      </span>
                        </el-dialog>
                    </div>
                    <div>
                        <el-table :data="tableData" style="width: 100%">
                            <el-table-column prop="date" label="借款期限" width="180">
                            </el-table-column>
                            <el-table-column prop="server" label="服务费比例" width="180">
                            </el-table-column>
                            <el-table-column prop="metion" label="设备">
                            </el-table-column>
                            <el-table-column prop="du" label="额度">
                            </el-table-column>
                            <el-table-column prop="oprate" label="操作">
                                <template slot-scope="scope">
                        <el-button type="text" size="small">编辑</el-button>
                        <el-button type="text" size="small">删除</el-button>
                                </template>
                </el-table-column>
                        </el-table>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
    import iphone from '../comm/iphone.vue'
    import loanRoom from '../comm/loanRoom.vue'
    import newloan from '../comm/newloan.vue'
    export default {
        data() {
            return {
                dialogVisible: false,
                 dialogVisible1: false,
                  dialogVisible2: false,
                tableData: [{
                    date: '7天',
                    server: '20%',
                    metion: 'iPhone 6s',
                    du: '1000.00',
                    oprate: ''
                }, {
                    date: '7天',
                    server: '20%',
                    metion: 'iPhone 6s',
                    du: '1000.00',
                    oprate: ''
                }, {
                    date: '7天',
                    server: '20%',
                    metion: 'iPhone 6s',
                    du: '1000.00',
                    oprate: ''
                }, {
                    date: '7天',
                    server: '20%',
                    metion: 'iPhone 6s',
                    du: '1000.00',
                    oprate: ''
                }]
            }
        },
        methods: {
            handleClose(done) {
               
                        done();     
            }
        },
        components: {
            'm-iphone': iphone,
            'm-loanroom':loanRoom,
            'm-newloan':newloan
        }
    }
</script>
<style lang="scss" scoped>
    @import '../../css/comm.scss';
    
</style>
